<script setup lang="ts">
import { onMounted, ref, shallowRef } from "vue";

defineOptions({
  name: "ScrollBoard"
});

const getValueColor = (value: string) => {
  // 移除百分号并转换为数字
  const num = parseFloat(value.replace("%", ""));
  if (num > 3) {
    return "#2ECC71"; // 绿色
  } else if (num < 0) {
    return "#FF6B6B"; // 红色
  } else {
    return "#F1C40F"; // 黄色
  }
};

const formatValue = (value: string) => {
  return `<span style="color:${getValueColor(value)}">${value}</span>`;
};

const data = shallowRef([
  ["1", formatValue("-2.5%"), formatValue("0.05%"), formatValue("0.3%")],
  ["2", formatValue("0.7%"), formatValue("2.5%"), formatValue("0.8%")],
  ["3", formatValue("3.5%"), formatValue("2.1%"), formatValue("0.8%")],
  ["4", formatValue("3.5%"), formatValue("6.6%"), formatValue("3.2%")],
  ["5", formatValue("-5.3%"), formatValue("1.6%"), formatValue("3.3%")],
  ["6", formatValue("3.5%"), formatValue("3.6%"), formatValue("4.2%")],
  ["7", formatValue("3.5%"), formatValue("6.6%"), formatValue("3.2%")],
  ["8", formatValue("3.5%"), formatValue("6.68%"), formatValue("5.5%")],
  ["9", formatValue("-6.5%"), formatValue("3.5%"), formatValue("6.88%")],
  ["10", formatValue("3.5%"), formatValue("2.2%"), formatValue("3.6%")],
  ["11", formatValue("-3.5%"), formatValue("2.2%"), formatValue("3.6%")],
  ["12", formatValue("3.5%"), formatValue("2.2%"), formatValue("3.6%")]
]);

const config = shallowRef({
  header: [
    '<span style="color:#61d2f7;">月份</span>',
    '<span style="color:#61d2f7;">上衣</span>',
    '<span style="color:#61d2f7;">裤子</span>',
    '<span style="color:#61d2f7;">鞋子</span>'
  ],
  data: [],
  columnWidth: [100],
  align: ["center"],
  headerBGC: "transparent",
  oddRowBGC: "#072951",
  evenRowBGC: "rgb(18, 28, 43)"
});

onMounted(() => {
  config.value.data = [...data.value];
});
</script>

<template>
  <div class="box">
    <div class="title">
      <span>NIKE各月对比去年同期销售增长率</span>
    </div>
    <div class="content">
      <div class="board-wrapper">
        <dv-scroll-board :config="config" class="scroll-board" />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.dv-scroll-board .rows .row-item:nth-child(odd) {
  box-shadow:
    -10px 0 15px #2c58a6 inset,
    10px 0 15px #2c58a6 inset !important;
}
</style>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 20px;

  .title {
    flex-shrink: 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-align: center;
  }

  .content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;

    .board-wrapper {
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;

      .scroll-board {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
